<!-- 主体部分 -->
<div class="layui-fluid" id="body">
    <!-- 内容主体区域 -->
    <blockquote class="layui-elem-quote layui-text">
        欢迎使用<strong>博客管理系统</strong>
    </blockquote>
    <div style="padding: 15px;">
        <!-- 面板1 -->
        <div class="layui-card layui-panel">
            <div class="layui-card-header">
                个人信息
            </div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md2">
                        <img src="__IMG__/user.jpg" alt="" width="50%" style="border-radius: 50%;">
                    </div>
                    <div class="layui-col-md10">
                        <span class="layui-font-24">
                            {$uname}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <!-- form大表单 -->
        <form class="layui-form" action="" id="formUser">
            <!-- 基本信息 -->
            <div class="layui-card layui-panel">
                <div class="layui-card-header">
                    基本信息
                </div>
                <div class="layui-card-body">

                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="uname" lay-verify="required" placeholder="请输入" id="uname"
                                   autocomplete="off" class="layui-input" value="{$uname}">
                            <input type="text" name="id" lay-verify="required" placeholder="请输入" id="id"
                                   autocomplete="off" class="layui-input layui-hide" value="{$id}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="uid" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" id="uid" value="{$uid}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            {if $sex=="男"}
                                <input type="radio" name="sex" value="男" title="男" checked>
                                <input type="radio" name="sex" value="女" title="女" >
                                <input type="radio" name="sex" value="禁" title="禁用" disabled >
                            {elseif $sex=="女"/}
                                <input type="radio" name="sex" value="男" title="男" >
                                <input type="radio" name="sex" value="女" title="女" checked>
                                <input type="radio" name="sex" value="禁" title="禁用" disabled >
                            {else /}
                                <input type="radio" name="sex" value="男" title="男" >
                                <input type="radio" name="sex" value="女" title="女" >
                                <input type="radio" name="sex" value="禁" title="禁用" disabled checked>
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所在地区</label>
                        <div class="layui-input-inline">
                            <input type="text" name="address" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" id="address" value="{$address}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-inline">

                            <select name="birthday" id="birthday">
                                {for start="1999" end="2024"  step="1" }
                                {if $birthday==$i}<option value="{$i}" selected>{$i}</option>
                                {else /} <option value="{$i}">{$i}</option>
                                {/if}
                                {/for}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 教育信息 -->
            <div class="layui-card layui-panel">
                <div class="layui-card-header">
                    教育信息
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">学校名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="scname" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" id="scname" value="{$scname}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">专业</label>
                        <div class="layui-input-inline">
                            <input type="text" name="major" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" id="major" value="{$major}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">入学时间</label>
                        <div class="layui-input-inline">
                            <select name="intake" id="intake">
                                {for start="2020" end="2028"  step="1" }
                                {if $intake==$i}<option value="{$i}" selected>{$i}</option>
                                {else /} <option value="{$i}">{$i}</option>
                                {/if}
                                {/for}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">学历</label>
                        <div class="layui-input-inline">
                            <select name="education" id="education">
                                {foreach name="xueli" item="vo"}
                                    {if $education==$vo}<option value="{$vo}" selected>{$vo}</option>
                                    {else /}<option value="{$vo}" >{$vo}</option>
                                    {/if}
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 工作信息 -->
            <div class="layui-card layui-panel">
                <div class="layui-card-header">
                    工作信息
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">公司名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="corname" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" id="corname" value="{$corname}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">职位名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="jobname" id="jobname" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" value="{$jobname}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属行业</label>
                        <div class="layui-input-inline">
                            <input type="text" name="profession" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input" id="profession" value="{$profession}">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 兴趣标签 -->
            <div class="layui-card layui-panel">
                <div class="layui-card-header">
                    兴趣标签
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
<!--                        <label class="layui-form-label">兴趣标签</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <input type="checkbox" name="hobby[0]" title="Java" value="Java" >-->
<!--                            <input type="checkbox" name="hobby[1]" title="Python" value="Python" >-->
<!--                            <input type="checkbox" name="hobby[2]" title="PHP" value="PHP" >-->
<!--                            <input type="checkbox" name="hobby[3]" title="HTML" value="HTML" >-->
<!--                            <input type="checkbox" name="hobby[4]" title="CSS" value="CSS" >-->
<!--                            <input type="checkbox" name="hobby[5]" title="JS" value="JS" >-->
<!--                            <input type="checkbox" name="hobby[6]" title="C" value="C" >-->
<!--                            <input type="checkbox" name="hobby[7]" title="C++" value="C++" >-->
<!--                            <input type="checkbox" name="hobby[8]" title="C#" value="C#" >-->
<!--                            <input type="checkbox" name="hobby[9]" title="Rust" value="Rust" >-->
<!--                        </div>-->
<!--                        <hr>-->
                        <label class="layui-form-label">兴趣标签</label>
                        <div class="layui-input-block">
                            {foreach name="hblist" item="vo" key="k"}
                            {if $vo==true}<input type="checkbox"  title="{$k}" value="{$k}" checked name="hobby[{$i++-2028}]" >
                            {else /}<input type="checkbox"  title="{$k}" value="{$k}" name="hobby[{$i++-2028}]" >
                            {/if}
                            {/foreach}
                        </div>

                    </div>
                    <!-- jquery操作显示 -->
                    <div>
                        <!-- 待扩展 -->
                    </div>
                </div>
            </div>
            <!-- 身份标签 -->
            <div class="layui-card layui-panel">
                <div class="layui-card-header">
                    身份标签
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">身份标签</label>
                        <div class="layui-input-block">
                            {volist name="sflist" id="vo"  }
                            {if $identity==$vo}<input type="radio" name="identity" title="{$vo}" value="{$vo}" checked>
                            {else /} <input type="radio" name="identity" title="{$vo}" value="{$vo}">
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
                <!-- 完善个人信息 -->
            <div class="layui-card layui-panel">
                    <div class="layui-card-header">
                        操作
                    </div>
                    <div class="layui-card-body">
                        <!-- 当点击完善个人信息时，input可以进行修改 -->
                        <input type="button" class="layui-btn" id="updUserInfo" value="完善个人信息"></input>
                        <!-- 正式保存按钮 -->
                        <input type="button" class="layui-btn layui-btn-primary" value="保存" id="saveUser"></input>

                    </div>
                </div>
        </form>
    </div>
</div>

<script>
    // 利用jquery设置当前的所有输入控件属性为不可选中或者不可输入
    $(document).ready(function(){
        // 获取当前最大的form
        $("input").attr("readonly",true)
        $("input[type='radio']").attr("disabled","disabled")
        $("input[type='checkBox']").attr("disabled","disabled")
        $("select").attr("disabled","disabled").css("background-color","#EEEEEE");
    })

    // 点击完善时，进行恢复
    $("#updUserInfo").click(function(){
        $("input").attr("readonly",false)
        $("input[type='radio']").removeAttr("disabled")
        $("input[type='checkBox']").removeAttr("disabled")
    })

    // 保存按钮，提交要保存的值
    $("#saveUser").click(function (){
        var uname = $("#uname").val();
        var uid = $("#uid").val();
        var sex = $("input[name='sex']:checked").val();
        var address = $("#address").val();
        var birthday = $("#birthday").val(); //出生日期
        var scname = $("#scname").val();
        var major = $("#major").val();
        var intake = $("#intake").val(); //入学时间
        var education = $("#education").val(); //学历
        var corname = $("#corname").val();
        var jobname = $("#jobname").val();
        var profession = $("#profession").val();
        // 获取身份标签
        var identity = $("input[name='identity']:checked").val();
        // 获取兴趣标签
        var hobby = [];

        for(let i = 0; i <12; i++) {
            hobby[i] = $("input[name='hobby["+i+"]']:checked").val();
        };
        $.post("/index.php/userinfo/saveUserInfo",
            {
                // 获取表单的值
                "id":$("#id").val(),
                "uname":uname,
                "uid":uid,
                "sex":sex,
                "address":address,
                "birthday":birthday,
                "scname":scname,
                "major":major,
                "intake":intake,
                "education":education,
                "corname":corname,
                "jobname":jobname,
                "profession":profession,
                "hobby[]":hobby,
                "identity":identity,

            },function (data,status){
                //判断后端传递的数据
                if(data==1){
                    layer.msg("保存成功");
                    // 重新加载页面
                    window.location.reload("/index.php/index/userInfo")
                }else {
                    layer.msg("保存失败")
                }
              //layer.msg(data+status)
            })
    })
</script>